<template>
    <div class="app-container">
        <el-row :gutter="24">
            <!--物料属性类型数据-->
            <el-col :span="6" :xs="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>物料属性类型</span>
                        <el-button style="float: right;" type="danger" icon="el-icon-delete" circle v-if="ckBtn===true"
                            @click="handleDelete(1,'fei')"></el-button>
                        <el-button style="float: right;margin: 0 10px 0 0;" type="primary" icon="el-icon-edit"
                            @click="handleUpdate(1,'fei')" v-if="ckBtn===true" circle></el-button>
                        <el-button style="float: right;margin: 0 10px 0 0;" type="success" icon="el-icon-plus"
                            @click="handleAdd('fei')" circle></el-button>
                    </div>
                    <div v-for="item in sxList" :key="item.id" class="text item" @click="getItem(item,'cangku')">
                        <el-col :span="24">
                            <el-card class="cangku-card" shadow="hover" style="cursor:pointer;margin:0px 0 10px 0">
                                <span> {{item.propertyCode}}</span> <span style="margin: 0 0 0 30px;">
                                    {{item.propertyName}}</span>
                            </el-card>
                        </el-col>
                    </div>
                </el-card>
            </el-col>

            <!--表格-->
            <el-col :span="18" :xs="24">
                <div style="display: flex;justify-content: space-between;">
                    <div style="margin-top: 10px;">自定义属性类型</div>
                    <el-button style="margin: 0 10px 10px 0;" type="success" @click="handleAdd('zi')">新增</el-button>
                </div>
                <el-table v-loading="loading" :data="wuliaoList" style="width: 100%;">
                    <el-table-column label="属性类型编码" align="center" prop="propertyCode" :show-overflow-tooltip="true" />
                    <el-table-column label="属性类型名称" align="center" prop="propertyName" :show-overflow-tooltip="true" />
                    <el-table-column label="物料类型描述" align="center" prop="dataType" :show-overflow-tooltip="true" />
                    <el-table-column label="是否为常量" align="center" prop="isConstant" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.isConstant==="0"?'否':'是'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="默认值" align="center" prop="tolerant" :show-overflow-tooltip="true" />

                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['cangku:kuwei:update']"
                                @click="handleUpdate(scope.row,'zi')">修改</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete"
                                @click="handleDeleteTable(scope.row,'zi')">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-col>
        </el-row>

        <!-- 添加或修改物料属性类型    -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body @close="closeDialog">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="属性类型编码" prop="propertyCode">
                            <el-input v-model="form.propertyCode" placeholder="请输入属性类型编码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="属性类型名称" prop="propertyName">
                            <el-input v-model="form.propertyName" placeholder="请输入属性类型名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物料类型描述" prop="dataType" v-if="isEdit">
                            <el-input v-model="form.dataType" placeholder="请输入物料类型描述" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="默认值" prop="tolerant" v-if="isEdit">
                            <el-input v-model="form.tolerant" placeholder="请输入默认值" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否为常量" prop="isConstant" v-if="isEdit">
                            <el-radio v-model="form.isConstant" label="1">是</el-radio>
                            <el-radio v-model="form.isConstant" label="0">否</el-radio>

                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormLeft" v-if="isAdd">确 定</el-button>
                <el-button type="primary" @click="submitForm" v-if="isEdit">确 定</el-button>

                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import {
        getCkList, getwlList, addCk, getKqList, updateCk, detailCk, delCk, addKq,
        updateKq, detailKq, delKq, addKw, updateKw, detailKw, delKw, getKwList,
        addWl, updateWl, detailWl, delWl, getWlList, getWlinfoList
    } from "@/api/cangku/kuwei";
    import { listWlsx, addWlsx, editWlsx, delWlsx, listWlsxPro, addWlsxPro, editWlsxPro, delWlsxPro } from "@/api/wuliao/wlsx";
    import { getToken } from "@/utils/auth";
    import { treeselect } from "@/api/system/dept";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import { isEmpty } from "lodash";
    export default {
        name: "Kuwei",
        data() {
            return {
                sxList: [], isEdit: false, isAdd: false, kuquList: [], kuweiList: [], ckBtn: false, kqBtn: false, kwBtn: false, wlBtn: false,
                bianmaLabel: '', mingchengLabel: '', rlLabel: '', msLabel: '',
                wuliaoList: [], loading: true, title: "", open: false, kqOpen: false, kwOpen: false, wlOpen: false,
                //仓库id
                positionId: undefined, areaId: undefined, locatorId: undefined, positionName: '', total: 0, form: {},
                kqForm: {}, kwForm: {}, wlForm: {}, materialOptions: [], queryParams: { pageNum: 1, pageSize: 10, },
                rules: {
                    propertyCode: [
                        { required: true, message: "属性类型编码不能为空", trigger: "blur" },
                    ],
                    propertyName: [
                        { required: true, message: "属性类型名称不能为空", trigger: "blur" },
                    ],

                },

            };
        },

        created() {
            this.getList();
            // this.getCkList()
            this.listWlsxPro()
        },
        methods: {
            //card点击事件
            getItem(item, type) {

                switch (type) {
                    case 'cangku':
                        this.ckBtn = true
                        this.form = item
                        this.getList()
                        break;
                    default:
                        break;
                }
            },
            /** 查询物料列表 */
            getList(data) {
                this.loading = true;
                listWlsx(this.queryParams).then(
                    (response) => {
                        // console.log(response)
                        this.wuliaoList = response.rows;
                        this.total = response.total;
                        this.loading = false;
                    }
                );
            },
            //属性类型列表
            listWlsxPro() {
                listWlsxPro(this.queryParams).then(res => {
                    this.sxList = res.rows
                })
            },
            // 取消按钮
            cancel() {
                this.open = false
                this.reset();
                this.getList()
                this.listWlsxPro();
            },
            closeDialog() {
                this.getList()
                this.listWlsxPro();
            },
            // 表单重置
            reset() {
                this.form = {};
                this.resetForm("form");
            },
            /** 新增按钮操作 */
            handleAdd(type) {
                this.reset();
                this.title = `添加物料属性类型`;
                this.open = true;
                switch (type) {
                    case 'fei':
                        this.isEdit = false
                        this.isAdd = true
                        break;
                    case 'zi':
                        this.isEdit = true
                        break;
                    default:
                        break;
                }
            },
            /** 修改按钮操作 */
            handleUpdate(row, type) {
                this.open = true;
                this.title = `修改物料属性类型`;

                switch (type) {
                    case 'fei':
                        this.isEdit = false
                        break;
                    case 'zi':
                        this.isEdit = true
                        this.form = row
                        break;
                    default:
                        break;
                }
            },
            /** 表单提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (this.title === '添加物料属性类型') {
                            addWlsx(this.form).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess("添加成功");
                                    this.open = false;
                                    this.getList();

                                }
                            });
                        } else {
                            editWlsx({ ...this.form, }).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();


                                }
                            });
                        }
                    }
                });
            },
            /** 表单提交按钮 */
            submitFormLeft: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        if (this.title === '添加物料属性类型') {
                            addWlsxPro(this.form).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess("添加成功");
                                    this.open = false;
                                    this.listWlsxPro();

                                }
                            });
                        } else {
                            editWlsxPro({ ...this.form, }).then((response) => {
                                if (response.code === 200) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.listWlsxPro();
                                }
                            });
                        }
                    }
                });
            },

            /** 删除按钮操作 */
            handleDelete(row, type) {
                this.$confirm('是否确认删除的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    return delWlsxPro(row.id);
                }).then(() => {
                    this.listWlsxPro();
                    this.msgSuccess("删除成功");
                }).catch(function () { });
            },

            //表格删除
            handleDeleteTable(row) {
                console.log(row);
                this.$confirm('是否确认删除的数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    return delWlsx(row.id);
                }).then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                }).catch(function () { });

            },

        },
    };
</script>
<style>
    .kuqu-card:hover span {
        color: rgb(24, 144, 255);
    }

    .cangku-card:hover span {
        color: rgb(24, 144, 255);
    }

    .cangku-card:focus {
        color: rgb(24, 144, 255);

    }
</style>